<template>
  <div class>
    <div
      v-if="showInfo"
      class="cesiumdialog"
      :style="{
        left: winPos[0] - getscalepxcnum(123) + 'px',
        bottom: winPos[3] + 'px',
        width: getscalepxc(250),
        height: getscalepxc(200),
      }"
    >
      <!-- 关闭图标 -->
      <i
        class="el-icon-close"
        :style="{
          position: 'absolute',
          right: getscalepxc(10),
          top: getscalepxc(10),
          fontSize: getscalepxc(12),
          pointerEvents: 'auto',
          cursor: 'pointer',
        }"
        @click="closebox()"
      ></i>
      <!-- name -->
      <div
        :style="{
          padding: getscalepxc(10),
          fontSize: getscalepxc(12),
          fontWeight: 'bold',
        }"
      >
        {{ optionsdata.name }}
      </div>
      <!-- 数据展示 -->
      <div
        class="fcl"
        :style="{
          fontSize: getscalepxc(7),
        }"
      >
        <div class="fwwsbcwh" :style="{ padding: getpmtwo(2, 15) }">
          <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;供温(℃)：</span>
            <span :style="{ width: getscalepxc(25), color: getfontunit() }">{{
              optionsdata.gongwen
            }}</span>
          </div>
          <div>
            <span>回温(℃)：</span>
            <span :style="{ width: getscalepxc(25), color: getfontunit() }">{{
              optionsdata.huiwen
            }}</span>
          </div>
        </div>
        <div class="fwwsbcwh" :style="{ padding: getpmtwo(2, 15) }">
          <div>
            <span>供压(MPa)：</span>
            <span :style="{ width: getscalepxc(25), color: getfontunit() }">{{
              optionsdata.gongya
            }}</span>
          </div>
          <div>
            <span>回压(MPa)：</span>
            <span :style="{ width: getscalepxc(25), color: getfontunit() }">{{
              optionsdata.huiya
            }}</span>
          </div>
        </div>
      </div>
      <!-- 图表 -->
      <div style="width: 100%; height: 65%; pointer-events: auto">
        <div :id="uniqueID" style="height: 100%; width: 100%"></div>
      </div>
    </div>
  </div>
</template>
<script>
import uuidv1 from "uuid/v1";
import * as echarts from "echarts/dist/echarts";

import commonmixins from "@/mixins/bigScreen/commonmixins";

export default {
  name: "cardpointtaian",
  mixins: [commonmixins],
  props: {
    diahtml: "",
    options: {},
  },
  components: {},
  data() {
    return {
      optionsdata: {
        name: "电厂西站",
        gongwen: "83.7",
        huiwen: "43.7",
        gongya: "0.98",
        huiya: "0.43",
        chart: "",
      },
      winPos: [0, 0, 0, 0],
      showInfo: true,
      uniqueID: "",
    };
  },
  computed: {},
  created() {
    this.uniqueID = uuidv1();
  },
  watch: {
    showInfo: {
      handler: function (n, o) {
        this.$nextTick(function () {
          this.initchart();
        });
      },
    },
    winPos: {
      handler: function (n, o) {
        //判断位置与窗口偏移
        let width = document.documentElement.clientWidth;
        let height = document.documentElement.clientHeight;

        let offwidth = n[0];
        let offheight = n[1];

        let reswidth = width - offwidth;
        let resheight = height - offheight;

        if (
          reswidth < 220 ||
          resheight < 20 ||
          reswidth > width ||
          resheight > height
        ) {
          this.showInfo = false;
        } else {
          this.showInfo = true;
        }
      },
    },
  },
  mounted() {
    this.$root._earth.sceneTree.root.children.push({
      ref: this.options.uid,
      czmObject: {
        name: "Pin1",
        xbsjType: "Pin",
        position: [1.9017005694855162, 0.5972477268978722, 488.7695178987821],
        near: 300,
        show: false,
      },
    });

    this.$parent.pinarr.push(this.options.uid);
    let pin1 = this.$root._earth.sceneTree.$refs[this.options.uid].czmObject;
    pin1.position = [
      this.options.position.longitude,
      this.options.position.latitude,
      this.options.position.height,
    ];
    XE.MVVM.track(this, "winPos", pin1, "winPos");

    this.initchart();
  },
  methods: {
    initchart() {
      let chartoptions = {
        backgroundColor: "#0000",
        color: ["#80FFCB", "#28C3F6", "#5E5CCC", "#FFD205"],

        textStyle: {
          //图例文字的样式
          color: "#fff",
          fontSize: this.getscalepxcnum(5),
        },

        legend: {
          show: "true",
          data: ["供温", "回温", "供压", "回压"],
          selected: {},
          textStyle: {
            //图例文字的样式
            color: "#fff",
            fontSize: this.getscalepxcnum(5),
          },
          icon:
            "path://M467.106909 581.073455l-107.636364-108.311273a55.645091 55.645091 0 1 0-78.94109 78.475636l148.154181 149.085091a55.458909 55.458909 0 0 0 40.680728 16.663273 55.389091 55.389091 0 0 0 39.982545-17.966546l278.039273-298.426181a55.645091 55.645091 0 1 0-81.454546-75.869091L467.130182 581.073455zM139.636364 0h744.727272a139.636364 139.636364 0 0 1 139.636364 139.636364v744.727272a139.636364 139.636364 0 0 1-139.636364 139.636364H139.636364a139.636364 139.636364 0 0 1-139.636364-139.636364V139.636364a139.636364 139.636364 0 0 1 139.636364-139.636364z",
          // right: 0
        },
        title: {
          // subtext: 'GB/日',
          // left: 'center',
          // top: '10px',
          // text: 'nameSpace Top5',
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          axisLabel: {
            // rotate: 45,
            color: this.getfontcontent(),
            fontSize: this.getscalepxcnum(8),
          },
          splitLine: { show: false },

          axisLine: {
            lineStyle: {
              color: this.getfontunit(),
              width: 1, //这里是为了突出显示加上的
            },
          },

          type: "category",
          // name: '时间',
          boundaryGap: false,
          data: ["0", "2", "4", "6", "8", "10", "12"],
        },
        yAxis: [
          {
            name: "℃",
            type: "value",
            splitLine: { show: false },
            nameTextStyle: {
              color: [this.getfontunit()],
            },
            axisLine: {
              lineStyle: {
                color: this.getfontunit(),
                width: 1, //这里是为了突出显示加上的
              },
              textStyle: {
                //图例文字的样式
                color: "#fff",
                fontSize: this.getscalepxcnum(5),
              },
            },
            axisLabel: {
              // rotate: 45,
              color: this.getfontcontent(),
              fontSize: this.getscalepxcnum(5),
            },
          },
          {
            name: "MPa",
            type: "value",
            splitLine: { show: false },
            nameTextStyle: {
              color: [this.getfontunit()],
            },
            axisLine: {
              lineStyle: {
                color: this.getfontunit(),
                width: 1, //这里是为了突出显示加上的
              },
            },
            axisLabel: {
              // rotate: 45,
              color: this.getfontcontent(),
            },
          },
        ],
        series: [
          {
            name: "供温",
            type: "line",
            yAxisIndex: 0,
            data: [
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
            ],
            smooth: true,
          },
          {
            name: "回温",
            type: "line",
            yAxisIndex: 0,
            data: [
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
              _.random(0, 100),
            ],
            smooth: true,
          },
          {
            name: "供压",
            type: "line",
            yAxisIndex: 1,
            data: [
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
            ],
            smooth: true,
          },
          {
            name: "回压",
            type: "line",
            yAxisIndex: 1,
            data: [
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
              _.random(0.0, 1.0, true),
            ],
            smooth: true,
          },
        ],
      };
      var beijingchart = echarts.init(
        document.getElementById(this.uniqueID),
        "dark"
      );
      beijingchart.setOption(chartoptions);

      window.addEventListener("resize", () => {
        beijingchart.resize();
      });
    },
    closebox() {
      //删除pin数组
      // let pinarr = _.cloneDeep(this.$parent.pinarr);
      // pinarr.map((item, index) => {
      //   if (item == this.options.uid) {
      //     this.$parent.pinarr.splice(index, 1);
      //   }
      // });

      //删除_earth.children对象
      this.$root._earth.sceneTree.root.children.map((eactpin, index) => {
        if (eactpin.ref == this.options.uid) {
          this.$root._earth.sceneTree.root.children.splice(index, 1);
        }
      });

      //删除msgbox数组对应元素
      let msgboxarr = _.cloneDeep(this.$parent.dependlistArr.cardpointtaian);
      msgboxarr.map((item, index) => {
        if (item.uid == this.options.uid) {
          this.$parent.dependlistArr.cardpointtaian.splice(index, 1);
        }
      });
    },
  },
};
</script>
<style lang='scss' scoped>
.cesiumdialog {
  // pointer-events: none;
  position: absolute;
  // width: 500px;
  // height: 400px;
  color: #aed2e2;
  background-image: url("/configuration/beijing/dialog.png");
  background-size: 100% 100%;
  background-color: #07275055;
  padding: 5px;
  border-radius: 5px;
  pointer-events: none;
  // cursor: pointer;
  // font-size: 18px;
}
</style>